<template>
	<div class="box" v-for="(item, index) in box" :key="item.id" draggable="true" @dragstart="onStart($event, index)"
		@dragenter="onEnter" @dragover="onOver" @drop="onDrop($event, index)">
		{{ item.name }}
	</div>
</template>
<script>
export default {
	data() {
		return {
			box: [{
				name: 1,
				id: 1,
			}, {
				name: 2,
				id: 2
			}, {
				name: 3,
				id: 3
			}, {
				name: 4,
				id: 4
			}]
		}
	},
	methods: {
		onStart(e, index) {
			e.dataTransfer.setData('text', index);
			console.log(`onStart`);
		},
		onEnter(e) {
			console.log(e.target);
			console.log(`onEnter`);
			e.preventDefault();
		},
		onOver(e) {
			console.log(`onOver`);
			e.preventDefault();
		},
		onDrop(event, index) {
			console.log('onDrop', event, index);
			let text = event.dataTransfer.getData('text');
			console.log(text);

			//这里进行交换即可，交换并没有改变dom，而是改变了里面的内容
			let s = text;
			let e = index;
			let temp = this.box[e]
			this.box[e] = this.box[s]
			this.box[s] = temp;
		}
	}
}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
</style>